<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script type="text/javascript" src="../vue.js"></script>
    <style>
    .public{
      width: 100px;
      height: 100px;
    }

    .active {
      background: red;
    }

    .noActive {
      background-color: yellowgreen;
    }

    .red {
      color: red;
    }

    .bold {
      font-weight: bold;
    }

    .italic {
      font-style: italic;
    }
    </style>
</head>

<body>
    <div id="app">
        <!-- 
      1.动态class:值是一个字符串
        用法:类名一般只有一个,并且不确定是哪一个
     --> 
     <div class="public"  :class="ishot?'active':'noActive'">box1</div>
     <div class="public"  :class="class1">box2</div>
         <!-- 
      2.动态class:值是一个对象,对象的key都是需要的class名称,值是布尔值,通过布尔值来控制当前类是否使用
        用法:类固定,但是不确定用不用
     -->
     <div class="public" :class="b3class">box3</div>

     <div class="public" :class="{red:isRed,bold:isBold,italic:isItalic}">box4</div>
     <!-- 
      3.动态class:值是一个数组
        用法:类型个数不固定,可以操作数组,对类名进行增删改
     -->
     <div class="public" :class="classArr">box5</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data() {
            return{
                ishot:true,
                class1:'red',
                b3class:{
                    red: true,
                   bold: true,
                   italic: true
                },
                isRed: true,
                isBold: true,
                isItalic: true,
                classArr: ['red', 'italic']
            }
        }
    })
</script>

</html>